<template>
  <view class="life-services">
    <view class="return-box" @click="goBack">
      <up-icon name="arrow-left"></up-icon>
    </view>
    <h4 class="title">生活缴费</h4>
    <view class="payment-box">
      <paymentCard
        title="房费缴纳"
        class-name="houses"
        @onClick="hedelCardClick"
      ></paymentCard>
      <paymentCard
        title="电费缴纳"
        class-name="electricity"
        width="32vw"
        @onClick="hedelCardClick"
      ></paymentCard>
      <paymentCard
        title="水费缴纳"
        class-name="water"
        width="32vw"
        @onClick="hedelCardClick"
      ></paymentCard>
    </view>
    <h4 class="title">宽带申请</h4>
    <view class="payment-box">
      <paymentCard
        title="宽带申请"
        class-name="broadband"
        btnText="去申请"
        @onClick="hedelCardClick"
      >
		  <template #btn>
			<button class="btn" @click="payClick">去缴费</button>
		  </template>
	  </paymentCard>
    </view>
    <h4 class="title">房屋管理</h4>
    <view class="payment-box">
      <paymentCard
        title="门锁管理"
        class-name="manage"
        btnText="去管理"
        @onClick="hedelCardClick"
      ></paymentCard>
    </view>
    <h4 class="title">物业缴费</h4>
    <view class="payment-box">
      <paymentCard
        title="物业缴费"
        class-name=".property-fee"
        btnText="去缴费"
        @onClick="hedelCardClick"
      >
	  </paymentCard>
    </view>
    <h4 class="title">意见反馈</h4>
    <view class="payment-box">
      <paymentCard
        title="意见反馈"
        class-name="feedback"
        btnText="去看看"
        @onClick="hedelCardClick"
      ></paymentCard>
    </view>
  </view>
</template>

<script setup>
import { customNav } from "@/utils/customNav";
import paymentCard from "@/package_property/pages/components/payment-card/index.vue";

function hedelCardClick(name) {
  console.log(name);
  switch (name) {
    case "房费缴纳":
    customNav("list");
      break;
    case "电费缴纳":
      customNav("hydropower?type=电表");
      break;
    case "水费缴纳":
      customNav("hydropower?type=水表");
      break;
    case "门锁管理":
      customNav("door-lock");
      break;
    case "意见反馈":
      customNav("feedback");
      break;
    case "宽带申请":
      // customNav("agree");
      customNav("broadband");
      break;
    case "物业缴费":
      customNav("property-fee");
      break;

    default:
      break;
  }
}
function payClick () {
  customNav("pay-list");
}
function goBack () {
  customNav(`/package_kuafu_apartment/pages/home/index`);
}
</script>

<style lang="less" scoped>
@import "./style/life-services.less";
</style>